<template>
	<view class="">
		<view class="kuang">
			<view class="fl_ju">

				<block v-for="itema in status">
					<text class="title" v-if="info.orderStatus==itema.value">{{itema.title}}</text>
				</block>
				<!-- <text class="time">倒计时 00：15：00</text> -->
			</view>
			<u-divider style="margin: 32rpx 0;"></u-divider>
			<view class="fl_al xiangq" v-for="item in cpInfo">
				<image :src="item.image" mode=""></image>
				<view class="xinxi">
					<view class="name">
						{{item.productName}}
					</view>
					<view class="kouwei">
						{{item.condiment}}/{{item.sweetness}}/{{item.temperature}}
					</view>
					<view class="shuliang">
						购买数量 *{{item.quantity}}
					</view>
				</view>
			</view>
		</view>
		<view class="kuang">
			<view class="one fl_ju">
				<text class="staer">订单编号</text>
				<view class="type">
					{{info.orderNo}}
				</view>
			</view>
			<view class="one fl_ju">
				<text class="staer">下单时间</text>
				<view class="type">
					{{info.createTime}}
				</view>
			</view>
			<view class="one fl_ju">
				<text class="staer">实付金额</text>
				<view class="type">
					￥{{info.actualAmount/100}}
				</view>
			</view>
			<!-- 	<view class="one fl_ju">
				<text class="staer">是否打包</text>
				<view class="type">
					{{isPackaged==0?'否':'是'}}
				</view>
			</view> -->
			<view class="one fl_ju">
				<text class="staer">备注</text>
				<view class="type">
					{{info.remarks}}
				</view>
			</view>
			<!-- 		<view class="" style="	display: flex;
		justify-content: flex-end;">
				

			</view> -->
			<view class="btns" v-if="info.orderStatus==1">
				<view class="btn">
					<u-button text="联系商家" @click="show2 = true" shape="circle" color="#aaa"></u-button>
				</view>
				<view class="btn">
					<u-button text="立即支付" @click="fukuan" shape="circle"
						color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view>
				<!-- 		<view class="btn">
					<u-button text="取消订单" shape="circle" color="linear-gradient(to right, #3AA3FF,#005DFF)"></u-button>
				</view> -->
			</view>
			<view class="btns" v-else>
				<view class="btn2">
					<u-button text="联系商家" @click="show2 = true" shape="circle" color="#aaa"></u-button>
				</view>
			</view>
		</view>
		<u-action-sheet :actions="list" @close="close" @select="selectClick" :closeOnClickOverlay="true"
			:closeOnClickAction="true" :title="title" :show="show2"></u-action-sheet>
	</view>
</template>

<script>
	import {
		orderInfo,
		orderProductList,
		orderUnifiedorder
	} from '@/api/url.js'
	export default {
		data() {
			return {
				status: [{
						value: 0,
						title: '待支付'
					}, {
						value: 1,
						title: '待支付'
					},
					{
						value: 2,
						title: '已支付(派单中)'
					}, {
						value: 3,
						title: '已取消'
					}, {
						value: 4,
						title: '已完成'
					}, {
						value: 5,
						title: '退款中'
					}, {
						value: 6,
						title: '已退款'
					}
				],
				info: {},
				title: '联系店家',
				list: [{
					name: '18455050327',
					subname: "电话",
					color: '#3AA3FF',
					fontSize: '20'
				}],
				show2: false,
				token: uni.getStorageSync("token"),
				cpInfo: []
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.details()
		},
		methods: {
			// 去付款
			fukuan() {
				var that = this
				orderUnifiedorder({
					orderId: that.info.id
				}, that.token).then(res => {
					console.log(res)
					uni.requestPayment({
						provider: 'wxpay', // 支付方式为微信支付
						timeStamp: res.data.response.timeStamp, // 支付签名时间戳
						nonceStr: res.data.response.nonceStr, // 支付签名随机串
						package: res.data.response.package, // 支付签名包
						signType: 'MD5', // 支付签名方式
						paySign: res.data.response.paySign, // 支付签名
						success: function(res) {
							uni.showToast({
								title: '支付成功~',
								icon: 'success',
							})
							that.details()
						},
						fail: function(err) {
							console.log('支付失败：', err);
							uni.showToast({
								title: '支付失败',
								icon: 'error',
							})
							that.details()
						}
					});
				})
			},
			// 详情接口
			details() {
				orderInfo({
					id: this.id
				}, this.token).then(res => {
					console.log(res)
					this.info = res.data.data
					this.orderInfo(this.info.orderNo)
				})

			},
			// 产品信息
			orderInfo(e) {
				orderProductList({
					orderNo: e
				}, this.token).then(res => {
					console.log(res)
					this.cpInfo = res.data.rows
				})
			},
			// 关闭
			close() {
				this.show2 = false
			},
			// 拨号
			selectClick(e) {
				console.log(e.name)
				uni.makePhoneCall({
					phoneNumber: e.name, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.title {
		color: #090909;
		font-size: 38rpx;
		font-weight: 600;
	}

	.xiangq {
		image {
			width: 150rpx;
			height: 150rpx;
			margin-right: 25rpx;
		}

		.xinxi {
			.name {
				font-size: 30rpx;
				color: #090909;
				font-weight: 600;
			}

			.kouwei {
				color: #AAAAAA;
				font-size: 26rpx;
				margin: 20rpx 0;
			}

			.shuliang {
				color: #090909;
				font-size: 24rpx;
			}
		}
	}

	.one {
		padding: 17rpx 0;

		.staer {
			color: #AAAAAA;
			font-size: 30rpx;
		}

		.type {
			color: #090909;
			font-size: 30rpx;
		}
	}

	.btns {
		background-color: #fff;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.btn {
		width: 330rpx;
	}

	.btn2 {
		width: 100%;
	}
</style>